import React, { Component } from 'react'
import moment from 'moment';
import {Card,Table,Select,Input,DatePicker, Form,Button} from 'antd'
import axios from 'axios'
import './index.less'

const Option = Select.Option;
const FormItem = Form.Item
const { RangePicker } = DatePicker;
export default class Manage extends Component {
    state = {}
    componentWillMount() {
        axios.get('https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/hangzhou')
        .then(res =>{
            console.log(res.data.list)
            let tableList = res.data.list
            this.setState({
                 tableList
            })
        })
    }
    render() {
        const columns = [ 
            {
                title:'身份证号',
                dataIndex:'order_sn'
            },
            {
                title: '学分',
                dataIndex: 'bike_sn'
            },
            {
                title: '姓名',
                dataIndex: 'user_name'
            },
            {
                title: '手机号',
                dataIndex: 'mobile'
            },
            {
                title: '导游证号',
                dataIndex: 'total_time'
            },
            {
                title: '会费状态',
                dataIndex: 'status',
                render(status){
                    return status=1?"已缴费":"未交费"
                }
            },
            {
                title: '会费缴纳时间',
                dataIndex: 'start_time'
            },
            {
                title: '会费结束时间',
                dataIndex: 'end_time'
            },
            {
                title: '审核状态',
                dataIndex: 'total_fee',
                render(total_fee) {
                       return total_fee==1?"待审核":"审核通过"
                }
            },
            {
                title: '操作',
                dataIndex: 'distance'
            },
        ]
        return (
            <div className="manage-page" style={{background: "#ffffff"}}>
                <Card
                style={{background:"#eceef2", margin:"20px"}}
               
                >
                    <FilterFrom/>
                </Card>
              <Card>
              <FormItemList/>
              </Card>
                <Table
                    columns={columns}
                    dataSource={this.state.tableList}
                    bordered
                >

                </Table>
            </div>
        )
    }
}
class FilterFrom extends React.Component{
    render() {
        //getFieldDecorator实现双向绑定
        const { getFieldDecorator} = this.props.form;
        return (
            <Form layout='inline'>
                <FormItem label="时间">
                    {
                        getFieldDecorator("datapak",{
                            initialValue:""
                        })(
                            <RangePicker></RangePicker>
                        )
                    }
                </FormItem>
                <FormItem > 
                    {
                        getFieldDecorator('city_id',{
                            initialValue:"1"
                        })(
                            <Select placeholder="全部" style={{width:120}}>
                                <Option value='1'>全部会费状态</Option>
                                <Option value='2'>已交会费</Option>
                                <Option value='3'>未交会费</Option>
                                
                            </Select>
                        )
                    } 
                </FormItem>
                <FormItem   > 
                    {
                        getFieldDecorator('mode',{
                            initialValue:"1"
                        })(
                            <Select  style={{width:140}}>
                                <Option value='1'>请选择搜索类型</Option>
                                <Option value='2'>手机号</Option>
                                <Option value='3'>导游证号</Option>
                                <Option value='3'>姓名</Option>
                                <Option value='3'>带团旅游社</Option>
                              
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    {
                        getFieldDecorator("ipt")(
                            <Input placeholder="请输入搜索内容"></Input>
                        )
                    }
                </FormItem>             
                <FormItem> 
                    <Button type="primary">查询</Button>
                </FormItem>
            </Form>
        )
    }
} 
FilterFrom = Form.create({})(FilterFrom)
class FormItemList extends React.Component{
    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form layout="inline">
                <FormItem label="123">
                    {
                        getFieldDecorator("data")(
                            <DatePicker/>
                        )
                    }
                </FormItem>
                <FormItem   > 
                    {
                        getFieldDecorator('mode',{
                            initialValue:"1"
                        })(
                            <Select  style={{width:140}}>
                                <Option value='1'>请选择搜索类型</Option>
                                <Option value='2'>手机号</Option>
                                <Option value='3'>导游证号</Option>
                                <Option value='3'>姓名</Option>
                                <Option value='3'>带团旅游社</Option>
                              
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    {
                        getFieldDecorator('message',{
                            initialValue:"1"
                        })(
                            <Select>
                                <Option value='1'>请选择心中的明星</Option>
                                <Option value='2'>詹姆斯</Option>
                                <Option value='3'>杜兰特</Option>
                                <Option value='4'>哈登</Option>
                            </Select>
                        )
                    }
                </FormItem>
                {/* <FormItem>
                    {
                        getFieldDecorator("start",{
                            initialValue:"1"
                        })(
                            <Select>
                            <Option valu={1}>请选择心中的明星</Option>
                            <Option valu={2}>詹姆斯</Option>
                            <Option valu={3}>杜兰特</Option>
                            <Option valu={4}>哈登</Option>
                        </Select>
                        )
                    }
                </FormItem>  */}
            
            </Form>
        )
    }
}
FormItemList=Form.create({})(FormItemList)